<template>
	<view class="eva">
		<view class="evaluate" style="background-color: #EDEDED;">
			<view class="evaluate-top" style="background-color: #EDEDED;">
				<tui-icon name="arrowleft" color="black" size="24" @click="clickHandler"></tui-icon>
				<view class="evaluate-top-vw">
					<tui-tabs :tabs="tabs"
						:currentTab="currentTab" 
						selectedColor="black"
						sliderBgColor="black"
						backgroundColor="#EDEDED"
						width=120
						sliderWidth=25
						bold
						@change="change"
					>
					</tui-tabs>
				</view>
			</view>
			<view style="margin-top: 10rpx;">
				<view class="rate" v-show="currentTab == '0'" v-for="item in list" :key="item.id">
					<view class="rate-vw">
						<image src="../../../static/假头像.png" mode=""></image>
						<tui-rate :current="item.level" :size="16" active="#F2C029"></tui-rate>
						<text>{{item.add_time}}</text>
					</view>
					<text>{{item.comment}}</text>
				</view>
				<view v-show="currentTab == '1'">
					<view class="ganx" v-for="i in ganx" :key="i.id">
						<view class="ganx-con">
							<image src="../../../static/打赏.png" mode=""></image>
							<text>￥{{Number(i.price)}}</text>
							<text>{{i.add_time}}</text>
						</view>
					</view>
					<view class="answerRob-container-two-view" v-if="ganx.length == 0">
						<image src="../../../static/暂无内容.png" mode=""></image>
						<text>未找到相关信息</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiRate from "@/components/thorui/tui-rate/tui-rate.vue"
	import { commentList, mycomment, myRed } from "../../../utils/utils"
	export default {
		components:{
			tuiTabs,
			tuiIcon,
			tuiRate
		},
		data() {
			return {
				currentTab: 0, // 标签页
				current:0, // 评分
				list: [], // 评价初始数据
				ganx: [], // 感谢
				tabs: [
					{
						name: "评价"
					}, {
						name: "感谢"
					},
				]
			}
		},
		onLoad() {
			mycomment((res) => {
				// console.log('我的评价', res.data.data.data);
				this.list = res.data.data.data
			})
			myRed((a) => {
				// console.log('感谢', a.data.data.data);
				this.ganx = a.data.data.data
			})
		},
		methods: {
			// 标签页切换
			change(e) {
				this.currentTab = e.index
			},
			// 返回按钮
			clickHandler () {
				// console.log('你点击了返回');
				uni.navigateBack(-1)
			},
			// 评分
			changes (e) {
				this.current = e.index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.eva {
		height: 100vh;
		background-color: #EDEDED;
	}
	.evaluate-top-vw {
		width: 240rpx;
		margin-left: 210rpx;
	}
	.evaluate-top {
		display: flex;
		align-items: center;
	}
	
	.rate-vw {
		display: flex;
		align-items: center;
		margin-left: 22rpx;
	}
	.rate-vw > image {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}
	.rate-vw > text {
		color: #A6A6A6;
		font-size: 24rpx;
		margin-left: 8rpx;
	}
	.rate > text {
		font-size: 28rpx;
		color: #666666;
		margin-left: 96rpx;
	}
	.ganx {
		width: 92%;
		height: 30px;
		display: flex;
		flex-direction: column;
		margin:  0 0 10rpx 22rpx;
	}
	.ganx-con {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.ganx-con > image {
		width: 16px;
		height: 16px;
	}
	
	.answerRob-container-two-view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 120rpx;
		font-size: 24rpx;
		color: #666666;
	}
	.answerRob-container-two-view > image {
		width: 400rpx;
		height: 240rpx;
	}
</style>
